import React, { Component } from 'react';
import { Collapse, Button, InputNumber, Tabs, Card, Form, Select } from 'antd';
import Cookies from 'js-cookie'
import Header from './../Header';
import Footer from './../Footer';
import './list.css';
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            header: [
                <div className="header">
                    <div><span>0</span><span>YFII 余额</span></div>
                    <div><span>0.0000</span><span>已存入 YFII</span></div>
                    <div><span>0.0000</span><span>已收益 YFII</span></div>
                    <div><span>0.0000</span><span>待确认 YFII</span></div>
                </div>,
                <div className="header">
                    <div><span>0</span><span>DAI 余额</span></div>
                    <div><span>0.0000</span><span>已存入 DAI</span></div>
                    <div><span>0.0000</span><span>已收益 YFII</span></div>
                    <div><span>0.0000</span><span>待确认 YFII</span></div>
                </div>,
                <div className="header">
                    <div><span>0</span><span>yCRV 余额</span></div>
                    <div><span>0.0000</span><span>已存入 yCRV</span></div>
                    <div><span>0.0000</span><span>已收益 YFII</span></div>
                    <div><span>0.0000</span><span>待确认 YFII</span></div>
                </div>,
                <div className="header">
                    <div><span>0</span><span>WETH 余额</span></div>
                    <div><span>0.0000</span><span>已存入 WETH</span></div>
                    <div><span>0.0000</span><span>已收益 YFII</span></div>
                    <div><span>0.0000</span><span>待确认 YFII</span></div>
                </div>,
                <div className="header">
                    <div><span>0</span><span>LINK 余额</span></div>
                    <div><span>0.0000</span><span>已存入 LINK</span></div>
                    <div><span>0.0000</span><span>已收益 YFII</span></div>
                    <div><span>0.0000</span><span>待确认 YFII</span></div>
                </div>,
            ],
            content: [
                <div className="content">
                    <div className="draw">
                        <InputNumber></InputNumber>
                        <Button type="primary">提取</Button>
                    </div>
                    <div className="get">
                        <Button type="primary">领取</Button>
                    </div>
                    <div className="confirm">
                        预估值在收获后才会最终确认。
                    </div>
                </div>,
                <div className="content">
                    <div className="draw">
                        <InputNumber></InputNumber>
                        <Button type="primary">提取</Button>
                    </div>
                    <div className="get">
                        <Button type="primary">领取</Button>
                    </div>
                    <div className="confirm">
                        预估值在收获后才会最终确认。
                    </div>
                </div>,
                <div className="content">
                    <div className="draw">
                        <InputNumber></InputNumber>
                        <Button type="primary">提取</Button>
                    </div>
                    <div className="get">
                        <Button type="primary">领取</Button>
                    </div>
                    <div className="confirm">
                        预估值在收获后才会最终确认。
                    </div>
                </div>,
                <div className="content">
                    <div className="draw">
                        <InputNumber></InputNumber>
                        <Button type="primary">提取</Button>
                    </div>
                    <div className="get">
                        <Button type="primary">领取</Button>
                    </div>
                    <div className="confirm">
                        预估值在收获后才会最终确认。
                    </div>
                </div>,
                <div className="content">
                    <div className="draw">
                        <InputNumber></InputNumber>
                        <Button type="primary">提取</Button>
                    </div>
                    <div className="get">
                        <Button type="primary">领取</Button>
                    </div>
                    <div className="confirm">
                        预估值在收获后才会最终确认。
                    </div>
                </div>,
            ],
            index: Cookies.get('tab')
        };
    };
    onFinish(values) {
        console.log('Success:', values);
    };
    onFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
    };
    onTabClick(key) {
        Cookies.set('tab', key)
    };
    render() {
        console.log('1111', this.state.index);
        const index = this.state.index?this.state.index:'1';

        return (
            <div>
                <Header />
                <div className="List">
                    <Tabs defaultActiveKey={index} onTabClick={key => this.onTabClick(key)}>
                        <TabPane tab="投资" key="1">
                            <Collapse defaultActiveKey={['']}>
                                <Panel header={this.state.header[0]} key="1">
                                  <p>{this.state.content[0]}</p>
                                </Panel>
                                <Panel header={this.state.header[1]} key="2">
                                  <p>{this.state.content[1]}</p>
                                </Panel>
                                <Panel header={this.state.header[2]} key="3">
                                  <p>{this.state.content[2]}</p>
                                </Panel>
                                <Panel header={this.state.header[3]} key="4">
                                  <p>{this.state.content[3]}</p>
                                </Panel>
                                <Panel header={this.state.header[4]} key="5">
                                  <p>{this.state.content[4]}</p>
                                </Panel>
                            </Collapse>
                        </TabPane>
                        <TabPane tab="兑换" key="2">
                            <div className="addr">钱包地址：xsds</div>
                            <Card>
                                <Form
                                    onFinish={(values) => this.onFinish(values)}
                                    onFinishFailed={(e) => this.onFinishFailed(e)}
                                    layout="inline"
                                >
                                    <Form.Item label="从" name="from">
                                        <Select defaultValue="1" style={{ width: 120 }}>
                                            <Option value="1">1</Option>
                                            <Option value="10">10</Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item label="到" name="to">
                                        <Select defaultValue="1" style={{ width: 120 }}>
                                            <Option value="1">1</Option>
                                            <Option value="10">10</Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit">
                                        兑换
                                        </Button>
                                    </Form.Item>
                                </Form>
                                <div className="note">
                                    <div>说明</div>
                                    <div>说明</div>
                                    <div>说明</div>
                                </div>
                            </Card>
                        </TabPane>
                        <TabPane tab="邀请" key="3">
                            <div>
                                <div className="invting_code">
                                    <div className="code_img">二维码</div>
                                    <div className="code_title">二维码</div>
                                </div>
                                <div className="invting_addr">
                                    <div>
                                        <span>邀请链接</span>
                                        <Button>复制</Button>
                                    </div>
                                    <div>邀请说明</div>
                                </div>
                                <div className="clear"></div>
                            </div>
                            <div>邀请统计</div>
                        </TabPane>
                    </Tabs>
                    
                </div>
                <Footer />
            </div>
          );
    }
}

export default List;
